<template>
  <div class="middle">
    <!--中间内容 -->
    <div class="content">
      <div class="insert">
        <slot name="header"></slot>
        <slot name="main" :text="localText"></slot>
        <slot name="footer"></slot>
      </div>
      <div>
        <h1>{{ title }}</h1>
      </div>
      <div>
        <img
          class="tuXiang"
          alt="Vue logo"
          src="../assets/logo.png"
          @click="store"
        />
      </div>
      <div class="send">
        <h2>{{ content }}</h2>
      </div>
      <div class="button">
        <button @click="fetchData">点击获取天气预报</button>
      </div>
      <div class="ajax">
        
        <p>
        北京：{{ weatherData.beijing }}
        </p>
        <p>
        南宁：{{ weatherData.nanning }}
        </p>
      </div>
    </div>
    <div class="right">
      <Banner :background="sendColor" :margin="sendMargin"></Banner>
      <div>
        <router-link class="luyou" :to="{ name: 'image-info1' }"
          >图片1</router-link
        >
        <router-link class="luyou" :to="{ name: 'image-info2' }"
          >图片2</router-link
        >
         <router-link class="luyou" :to="{ name: 'forecast' }"
          >天气预报</router-link
        >
        <hr />
      </div>
      <div>
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Banner from "/src/components/Top.vue";
export default {
  name: "Middle",
  components: {
    Banner,
  },
  data() {
    return {
      weatherData: {},
      title: "",
      localText: "这是来自子组件的文本",
      sendColor: "green",
      sendMargin: "8px",
    };
  },
  created() {
    this.title = this.$store.state.title;
  },
  props: {
    content: String,
  },
  methods: {
    store() {
      alert(this.$store.state.data1);
      alert("通过计算属性获取数据：" + this.$store.getters.getData);
      this.$store.commit("getDataAlert", 101);
    },
    fetchData() {
      axios
        .get("http://localhost/ajax.php?select=self")
        .then((response) => {
          this.weatherData = response.data;
        })
        .catch((error) => {
          console.error("There was an error!", error);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ajax {
  width: 100%;
  border: solid 1px blue;
}
.middle {
  display: flex;
}
.right {
  height: 80vh;
  width: 40vw;
  background-color: antiquewhite;
  border: solid 0px;
}
.tuXiang {
  cursor: pointer;
}
.content {
  width: 60vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 80vh;
  color: aliceblue;
}
.insert {
  display: flex;
  border: solid 1px red;
  padding-left: 15px;
  padding-right: 15px;
}
.send {
  border: solid 1px red;
  padding-left: 15px;
  padding-right: 15px;
}
.luyou {
  margin: 20px;
}
</style>